import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Icon, Popover, Tools, ActivityIndicator, Result } from 'weaver-mobile';
import { ListViewPage, TabPage, RouteLayout, ShareAuth } from 'weaver-mobile-page';
import AuthorityAdd from '../form/AuthorityAdd';

const Item = Popover.Item;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
const getLabel = Tools.getLabel;
@inject('customerShareListStore')
@withRouter
@observer
export default class CustomerShareList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      overlay: [
        (<Item key="4" value="scan" data-seed="logId">Scan</Item>),
        (<Item key="5" value="special" style={{ whiteSpace: 'nowrap' }}>My Qrcode</Item>),
        (<Item key="6" value="button ct">
          <span style={{ marginRight: 5 }}>Help</span>
        </Item>),
      ],
      span: [7, 1]
    };
  }

  componentWillMount() {
    const { customerShareListStore, match, params } = this.props;
    let ps = params ? params : match.params;
    customerShareListStore.doNew(this, { type: "crm_share", ...ps });
  }

  componentDidMount() {
    this.props.customerShareListStore.doInit();
  }

  componentWillUnmount() {
    this.props.customerShareListStore.doClear();
  }

  render() {
    const store = this.props.customerShareListStore;
    const { initResponsed, initSuccessed, initFailedMsg, shareAuthRoute } = store;
    if (initResponsed) {
      if (initSuccessed) {
        const { listTab, listTabIndex, listAd, list, showCheck, canEdit, createShareLayout ,shareConditions,shareConditions1,doSave} = store;
        const { span, overlay, visible } = this.state;

        let tabProps = {
          page: listTabIndex,
          swipeable: true,
          onChange: (tab) => {
            store.topTabChange(tab.key);
          }
        };

        const popoverProps = {
          visible,
          overlay,
          onSelect: this.handleSelect,
          onVisibleChange: this.handleVisibleChange,
        };

        let listViewPageProps = {};
        listViewPageProps.showCheck = showCheck;
        listViewPageProps.store = list;
        listViewPageProps.heightSpace = 50;
        const share="";
        const btns = [];
        if (canEdit) {
          btns.push(
            <ShareAuth
              customType={{
                skipEntry: true,
                conditionData:[shareConditions,shareConditions1]
              }}
              store={shareAuthRoute}
              placeholder=""
              onChange={(data) =>doSave(data)}
            >
              <i className={'crm-nav-header-icon icon-crm icon-crm-add'} style={{ color: "#999" }} />
            </ShareAuth>
          );

          listViewPageProps.withSwipeAction = true;
          listViewPageProps.swipeActionProps = {
            right: [
              {
                text: getLabel('23777', "删除"),
                onPress: (data) => {
                  store.deleteShare(data);
                },
                className: "crm-list-swipe-delete",
              }
            ],
          }
        }

        return (
          <div>
            <TabPage
              btns={btns}
              span={span}
              tabs={listTab}
              tabProps={tabProps}
              popover={false}
              popoverProps={popoverProps}
            >
            </TabPage>
            <ListViewPage.Normal {...listViewPageProps} />
          </div >
        );
      } else {
        return (
          <div>
            <Result
              img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
              title=""
              message={initFailedMsg}
            />
          </div>);
      }
    } else {
      return <div className="crm-bg-loading"><ActivityIndicator text="Loading..." /></div>;
    }
  }
}